<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 8</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap3/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="lab5.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="bootstrap3_defaultTheme/assets/js/html5shiv.js"></script>
    <script src="bootstrap3_defaultTheme/assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<header>

    <div id="topHeaderRow" >
        <div class="container">
            <nav class="navbar navbar-inverse " role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <p class="navbar-text">Welcome to <strong>Art Store</strong>, <a href="#" class="navbar-link">Login</a> or <a href="#" class="navbar-link">Create new account</a></p>
                </div>

                <div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-gift"></span> Wish List</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-arrow-right"></span> Checkout</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <div id="logoRow" >
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h1>Art Store</h1>
                </div>


                <div class="col-md-4">
                    <form class="form-inline" role="search">
                        <div class="input-group">
                            <label class="sr-only" for="search">Search</label>
                            <input type="text" class="form-control" placeholder="Search" name="search" id="search">
                            <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                  </span>
                        </div>
                    </form>
                </div>


            </div>


        </div>
    </div>

    <div id="mainNavigationRow" >
        <div class="container">

            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Art Works</a></li>
                        <li><a href="#">Artists</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Specials <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Special 1</a></li>
                                <li><a href="#">Special 2</a></li>
                                <li><a href="#">Special 3</a></li>
                                <li><a href="#">Special 4</a></li>
                                <li><a href="#">Special 5</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>  <!-- end container -->
    </div>  <!-- end mainNavigationRow -->

</header>

<div class="container">

    <div class="page-header">
        <h2>View Cart</h2>
    </div>

    <table class="table table-condensed">
        <tr>
            <th>Image</th>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Amount</th>
        </tr>

        <script language="javascript">
            var rowArray =  [["images/art/tiny/116010.jpg","Artist Holding a Thistle","2","500" ],["images/art/tiny/113010.jpg","Self-portrait in a Straw Hat","1 ","700"]];

            var array = Array();//新建数组
            for( var i = 0;i <= 1 ;i++){
                array[i] = rowArray[i][2] * rowArray[i][3];
            }

            var subtotal =array[0] + array[1] ;//小计
            var tax = 0.1 * subtotal;//税额
            var shipping ;//运输

            if(subtotal >= 1000){
                shipping = 0;
            }
            else{
                shipping = 40;
            }

            var total = subtotal + tax + shipping;//总计

            for( var k = 0; k <= 1; k++){
                document.write("<tr>");
                column(rowArray);
                document.write("</tr>");
            }

            function column(m){
                var cols = 5;
                document.write("<td>" + "<img class='thumbnail' src="+ rowArray[k][0] + " alt='...'>" + "</td>");
                for(j = 1;j < cols-1;j++) {
                    document.write("<td>" + m[k][j] + "</td>")
                }
                document.write("<td>" + array[k] + "</td>")
            }

            function subtotal1(){
                document.write("$" + subtotal);
            }
            function tax1(){
                document.write("$" + tax);
            }
            function shipping1(){
                document.write("$" + shipping);
            }
            function total1(){
                document.write("$" + total);
            }

        </script>
        <!-- 这是你需要修改的地方 -->
        <!-- 本来是下面这样👇 -->
        <!-- <tr>
           <td><img class="img-thumbnail" src="images/art/tiny/116010.jpg" alt="..."></td>
           <td>Artist Holding a Thistle</td>
           <td>2</td>
           <td>$500</td>
           <td>$1000</td>
        </tr>
        <tr>
           <td><img class="img-thumbnail" src="images/art/tiny/113010.jpg" alt="..."></td>
           <td>Self-portrait in a Straw Hat</td>
           <td>1</td>
           <td>$700</td>
           <td>$700</td>
        </tr>  -->

        <!-- 你需要按照图片上的要求使用javascript来完成 -->
        <!-- 所需要的数据在这里 -->
        <!--
        $file1 = '116010.jpg';
        $product1 = 'Artist Holding a Thistle';
        $quantity1 = 2;
        $price1 = 500;
        $file2 = '113010.jpg';
        $product2 = 'Self-portrait in a Straw Hat';
        $quantity2 = 1;
        $price2 = 700;
       -->

        <tr class="success strong">
            <td colspan="4" class="moveRight">Subtotal</td>
            <td ><script>subtotal1()</script></td>
        </tr>
        <tr class="active strong">
            <td colspan="4" class="moveRight">Tax</td>
            <td><script>tax1()</script></td>
        </tr>
        <tr class="strong">
            <td colspan="4" class="moveRight">Shipping</td>
            <td><script>shipping1()</script></td>
        </tr>
        <tr class="warning strong text-danger">
            <td colspan="4" class="moveRight">Grand Total</td>
            <td><script>total1()</script></td>
        </tr>
        <tr >
            <td colspan="4" class="moveRight"><button type="button" class="btn btn-primary" >Continue Shopping</button></td>
            <td><button type="button" class="btn btn-success" >Checkout</button></td>
        </tr>
    </table>

</div>  <!-- end container -->

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h4><span class="glyphicon glyphicon-info-sign"></span> About Us</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <div class="col-md-3">
                <h4><span class="glyphicon glyphicon-earphone"></span> Customer Service</h4>
                <ul class="nav nav-stacked">
                    <li><a href="#">Delivery Information</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Shipping</a></li>
                    <li><a href="#">Terms and Conditions</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h4><span class="glyphicon glyphicon-shopping-cart"></span> Just Ordered</h4>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="images/art/tiny/099110.jpg" alt="...">
                    </a>
                    <div class="media-body">
                        <p class="media-heading similarTitle"><a href="#">The Veiled Woman</a></p>
                        <em>5 minutes ago</em>
                    </div>
                </div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="images/art/tiny/116010.jpg" alt="...">
                    </a>
                    <div class="media-body">
                        <p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
                        <em>11 minutes ago</em>
                    </div>
                </div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="images/art/tiny/113010.jpg" alt="...">
                    </a>
                    <div class="media-body">
                        <p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
                        <em>23 minutes ago</em>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <h4><span class="glyphicon glyphicon-envelope"></span> Contact us</h4>
                <form role="form">
                    <div class="form-group tight-form-group">
                        <label class="sr-only" for="name">Name</label>
                        <input type="text" class="form-control" name="email" placeholder="Enter name ..." id="name">
                    </div>
                    <div class="form-group tight-form-group">
                        <label class="sr-only" for="email">Email</label>
                        <input type="email" class="form-control" name="email" placeholder="Enter email ..." id="email">
                    </div>
                    <div class="form-group tight-form-group">
                        <label class="sr-only" for="email">Email</label>
                        <textarea class="form-control" rows="3" placeholder="Enter message ..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form>
            </div>

        </div>
    </div>

    <div id="copyrightRow">
        <div class="container">
            <div class="row">
                <p class="text-muted">All images are copyright to their owners. This is just a hypothetical site
                    <span class="pull-right">&copy; 2014 Copyright Art Store</span></p>
            </div>
        </div>
    </div>
</footer>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap3_defaultTheme/assets/js/jquery.js"></script>
<script src="bootstrap3_defaultTheme/dist/js/bootstrap.min.js"></script>
</body>
</html>